<template>
    <div class="second">
        <div class="second-head">
            <h5 class="head1-h5">近七日处理数据</h5>
        </div>
        <div id="chart" style="width:100%;height:216.5px;"></div>
    </div>
</template>

<script>

export default {
    name: 'Chart',
    data() {
        return {
            time: [this.nowtime(6), this.nowtime(5), this.nowtime(4), this.nowtime(3), this.nowtime(2), this.nowtime(1), this.nowtime(0)],
            count: []
        }
    },
    methods: {
        nowtime(a) {
            const value = new Date()
            const yesterday = new Date(value);
            yesterday.setDate(value.getDate() - a)
            const formattedDate = `${(yesterday.getMonth() + 1)}.${yesterday.getDate()}`;
            return formattedDate
        }
    },
    mounted() {
        let request = this.time.map((v) => {
            return this.$axios({
                url: `/workload`,
                method: 'get',
                params: {
                    time: v
                }
            })
        })
        Promise.all(request).then((response) => {
            response.forEach(({ data }) => {
                if (data) {
                    this.count.push(data.length)
                }
            })
            var chartDom = document.getElementById('chart');
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    y: 30,
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.time,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '处理量',
                        type: 'bar',
                        barWidth: '70%',
                        data: this.count
                    }
                ]
            };

            option && myChart.setOption(option);
        })
    }
}
</script>

<style lang="less" scoped>
.second {
    width: calc((100% - 518px) / 3);
    height: 257.5px;
    background: white;
    box-shadow: 0px 3px 6px 0px #E1E1E1;

    .second-head {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #EBEEF5;

        .head1-h5 {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            float: left;
            margin-left: 20px;
            margin-top: 10px;
        }
    }
}
</style>